<template>
  <div class="header" ref="header">
    <van-sticky offset-top="0">
      <!-- <div class="in">
        <van-icon name="arrow-left" @click="$router.go(-1)" size="20" color="white" class="i-back" />
        <p class="text">{{ title }}</p>

      </div> -->
      <van-nav-bar :title="title || $route.meta.title" :left-arrow="leftArrow" @click-left="onClickLeft">
        <template #right>
          <slot name="right"></slot>
        </template>
      </van-nav-bar>
      <slot/>
    </van-sticky>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    leftArrow: {
      type: Boolean,
      default: true
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      isFixed: false
    }
  }
  ,
  mounted() {
    // this.$nextTick(() => {
    //   window.addEventListener('scroll', this.isScroll, false)
    // })
  }
  ,
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
    ,
    getWindowHeight() {
      let windowHeight = 0
      if (document.compatMode == 'CSS1Compat') {
        windowHeight = document.documentElement.windowHeight
      } else {
        windowHeight = document.body.windowHeight
      }
      console.log(windowHeight)
      return windowHeight
    }
    ,
    getScrollTop() {
      return document.body.scrollTop
    }
    ,
    getScrollHeight() {
      return document.body.clientHeight
    }
    ,
    isScroll() {
      var topScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop)
      if (topScroll > this.$refs.header) {
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  .in {
    height: 50px;
    line-height: 50px;
    color: white;
    width: 100%;
    background-color: #017bd3;
    font-size: 16px;
    text-align: center;
    position: relative;
    box-sizing: border-box;

    &.isFixed {
      position: fixed;
      top: 0;
    }

    .i-back {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }
}

/deep/ .van-icon {
  color: #ffffff;
}

/deep/ .van-nav-bar {
  background-color: #017bd3;
}

/deep/ .van-nav-bar__title {
  color: #ffffff;
}
</style>
